<template>
  <div class="home-container">
    <!-- 欢迎信息 -->
    <div class="welcome-message">
      <h1>欢迎来到宿舍管理系统</h1>
      <p>在这里，您可以轻松管理宿舍信息。</p>
    </div>

    <!-- 宿舍信息概览卡片 -->
    <div class="cards-container">
      <el-card class="card" shadow="hover">
        <template #header>
          <div class="clearfix">
            <span>宿舍信息概览</span>
          </div>
        </template>
        <div class="card-content">
          <p>总宿舍数：{{ dormStats.totalDorms }}</p>
          <p>已占用宿舍：{{ dormStats.occupiedDorms }}</p>
          <p>空置宿舍：{{ dormStats.availableDorms }}</p>
        </div>
      </el-card>
    </div>

    <!-- 系统公告 -->
    <div class="announcement">
      <el-card class="card" shadow="hover">
        <template #header>
          <div class="clearfix">
            <span>系统公告</span>
          </div>
        </template>
        <div class="card-content">
          <p>尊敬的宿舍管理系统用户：</p>
          <p>为了提供更优质的服务，我们将在2025年1月1日00:00至06:00进行系统维护。</p>
          <p>在此期间，系统将暂时无法访问。请提前做好相关准备，并安排好相关工作。</p>
          <p>对于由此给您带来的不便，我们深表歉意，并感谢您的理解与支持。</p>
          <p>如有任何疑问，请联系系统管理员。</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 宿舍统计信息
const dormStats = ref({
  totalDorms: 0,
  occupiedDorms: 0,
  availableDorms: 0
});

// 模拟获取宿舍统计信息
dormStats.value.totalDorms = 50;
dormStats.value.occupiedDorms = 30;
dormStats.value.availableDorms = 20;

// 前往添加宿舍页面
const goToAddDorm = () => {
  router.push('/add-dorm');
};

// 前往管理宿舍页面
const goToManageDorms = () => {
  router.push('/manage-dorms');
};
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.welcome-message h1 {
  color: #409eff;
  font-size: 24px;
}

.welcome-message p {
  font-size: 16px;
  color: #606266;
}

.cards-container {
  margin-top: 20px;
}

.card {
  margin-bottom: 20px;
}

.action-buttons {
  margin-top: 20px;
}

.announcement {
  margin-top: 20px;
  width: 100%;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>